<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      v-model="form"
      :data="data"
      :page.sync="page"
      ref="crud"
      :search.sync="query"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button type="warning" size="small" icon="el-icon-download" @click="$refs.exportComp.visible = true">导出</el-button>
      </template>
    </avue-crud>
    <export-comp
      ref="exportComp"
      page-api-url="mes-admin/label-material-record/page-with-label"
      :option="option"
      :page="page"
      :query="query"
      file-name="原材料标签记录"
    ></export-comp>
  </basic-container>
</template>
<script>
import { materialgetPage } from '@/api/admin/recordsTag';
import { mapGetters } from 'vuex';
import exportComp from '@/components/export-comp';
export default {
  name: 'AdminBarcodeRecord',
  components: {
    exportComp
  },
  data() {
    return {
      pageCode: 'ADMIN_BARCODE_RECORD',
      form: {},
      loading: true,
      title: '',
      query: {},
      detailLoading: false,
      flagType: false,
      scrapData: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      data: [],
      option: {
        height: 'calc(100vh - 502px)',
        calcHeight: 30,
        tip: false,
        menu: false,
        searchShow: true,
        searchMenuSpan: 24,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        addBtn: false,
        delBtn: false,
        viewBtn: false,
        editBtn: false,
        selection: false,
        dialogClickModal: false,
        indexLabel: '序号',
        menuWidth: 250,
        columnBtn: false,
        searchLabelWidth: 100,
        column: [
          {
            label: '标签ID',
            prop: 'id',
            searchSpan: 6,
            search: true,
            //搜索校验是否为数字
            searchRules: [
              {
                pattern: /^[0-9]*$/,
                message: '请输入数字',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '标签序列号',
            prop: 'sequenceNumber',
            searchSpan: 6,
            search: true
          },
          {
            label: '包装层级类型',
            prop: 'level',
            type: 'select',
            dicData: [
              {
                label: '最小包',
                value: 1
              },
              {
                label: '第一层外包',
                value: 2
              }
            ],
            search: true
          },
          {
            label: '物料编码',
            prop: 'partNo',
            searchSpan: 6,
            search: true
          },
          {
            label: '物料名称',
            prop: 'partName',
            searchSpan: 6
          },
          {
            label: '物料型号',
            prop: 'partModel',
            searchSpan: 6,
            search: true
          },
          {
            label: '物料规格',
            prop: 'partSpec',
            searchSpan: 6
          },
          {
            label: '物料品牌',
            prop: 'partBrand',
            searchSpan: 6,
            search: true
          },
          {
            label: '包装数量',
            prop: 'quantity',
            searchSpan: 6
          },
          {
            label: '内部批次',
            prop: 'lotNo',
            searchSpan: 6,
            search: true
          },
          {
            label: '供应商',
            prop: 'vendorName',
            searchSpan: 6,
            search: true
          },
          {
            label: '操作类型',
            prop: 'operationType',
            type: 'select',
            search: true,
            searchSpan: 6,
            dicData: [
              { label: '生成', value: 'GENERATE' },
              { label: '报废', value: 'SCRAP' },
              { label: '增补', value: 'APPEND' },
              { label: '置换', value: 'REPLACE' },
              { label: '撤销', value: 'REVOKE' },
              { label: '打印', value: 'PRINT' },
              { label: '重打', value: 'REPRINT' },
              { label: '使用', value: 'USED' },
              { label: '导入', value: 'IMPORT' },
              { label: '删除', value: 'DELETE' }
            ]
          },
          {
            label: '操作时间',
            prop: 'createTime'
          },
          {
            label: '操作人',
            prop: 'createByName'
          },

          {
            label: '状态',
            prop: 'status',
            type: 'select',
            search: true,
            searchSpan: 6,
            dicData: [
              { label: '未打印', value: 1 },
              { label: '已打印', value: 2 },
              { label: '已报废', value: 3 },
              { label: '已使用', value: 4 }
            ],
            props: {
              label: 'label',
              value: 'value'
            }
          },
          {
            label: '序列号规则',
            prop: 'sequenceDefinitionName'
          },
          {
            label: '标签模版',
            prop: 'labelTemplateName'
          },
          {
            label: '打印机',
            prop: 'printerName'
          },
          {
            label: '操作时间',
            prop: 'datetimerange',
            searchType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            search: true,
            searchSpan: 12,
            hide: true
          }
        ]
      },

      timer: new Date().getTime(),
      modalName: '',
      sourceType: '',
      subTypeList: []
    };
  },
  computed: {
    ...mapGetters(['permission', 'userInfo'])
  },
  mounted() {
    this.$nextTick(() => {
      //搜索与表格结构分隔
      this.$structuralSplit();
    });
  },
  methods: {
    searchChange(params, done) {
      if (params.datetimerange && params.datetimerange.length > 0) {
        params.createTimeStart = params.datetimerange[0];
        params.createTimeEnd = params.datetimerange[1];
        delete params.datetimerange;
      }
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;

      this.onLoad(this.page, this.query);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      materialgetPage(page.currentPage, page.pageSize, params)
        .then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = this._map(data.records, (item) => {
            return {
              ...item
            };
          });
        })
        .catch((e) => {
          console.warn(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style scoped lang="scss">
.menu-option {
  text-align: left;
  padding: 0 30px;
}
.sequenceNumber {
  position: relative;
  padding: 8px 0 8px 0;
}
.detail {
  ::v-deep .el-table--small td {
    padding: 0;
  }
  ::v-deep .el-table .cell {
    padding: 0 0 0 8px;
  }
}
</style>
